<!DOCTYPE html>
<!-- saved from url=(0043)http://www.moyadou.com/moyadou/testpdf.html -->
<html lang="zh_cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>墨芽豆教材</title>
    <link rel="icon" href="http://www.moyadou.com/moyadou/images/public/logo_title.png">
    <style>
        main {
            width: 1400px;
            margin: 0 auto;
        }
        
        .preview {
            width: 100%;
            height: 600px;
        }
        
        .previewBox {
            display: flex;
        }
        
        .page {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 1056px;
        }
        
        .autocue {
            height: 594px;
            width: 344px;
            overflow-y: auto;
            padding: 15px;
            line-height: 20px;
            font-size: 14px;
            letter-spacing: 3px;
            border: 1px solid #f1f1f1;
            box-sizing: border-box;
        }
        
        .btn {
            width: 70px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <main>

        <div class="previewBox">
            <div><canvas id="preview" class="bordered" height="594"></canvas></div>
            <!-- <div class="autocue" id="autocue"></div> -->
        </div>
        <div class="page">
            <img src="../image/prev.png" alt="" onclick="prevPage()" class="btn">
            <div id="page_num" style="display:inline;">页码 : 1 / 31</div>
            <img src="../image/next.png" alt="" onclick="nextPage()" class="btn">
        </div>
    </main>
    <script src="../js/base.js"></script>
    <script src="./../js/pdf.js"></script>
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script>
        var token = localStorage.token;
        var AUTH_TOKEN = 'Bearer ' + token;
        pdfjsLib.workerSrc = '/js/pdf.worker.js';
        document.oncontextmenu = new Function("event.returnValue=false;");
        document.onselectstart = new Function("event.returnValue=false;");
        const preview = document.getElementById('preview');
        const page_num = document.getElementById('page_num');
        let textbook = fnGetTextBook('textbook');
        let nickname = fnGetTextBook('nickname');
        let mobile = fnGetTextBook('mobile');
        let area = fnGetTextBook('area');
        let class_id = fnGetTextBook('class_id');
        let pdf, pageNum, context = preview.getContext('2d');
        console.log(nickname)
        showPDF(textbook);

        //获取提此器
        // function fnCreatedFile(index) {
        //     var data = {
        //         page: index,
        //         class_id
        //     }
        //     $.ajax({
        //         url: baseURL + '/api/v2/teacher/appointment/class/tip',
        //         type: 'GET',
        //         data: data,
        //         headers: {
        //             'Authorization': AUTH_TOKEN
        //         },
        //         crossDomain: true,
        //         dataType: 'json',
        //         jsonp: 'callback',
        //         success: (ret) => {
        //             console.log(ret)
        //             var autocue = document.getElementById('autocue');
        //             if (ret.data && ret.data.contents) {
        //                 autocue.innerHTML = ret.data.contents;
        //             } else {
        //                 autocue.innerHTML = ''
        //             }
        //         },
        //         error: function(err) {
        //             console.log(err)
        //         }
        //     })
        // }

        // 预览PDF
        function showPDF(url) {
            let loadingTask = pdfjsLib.getDocument(url);
            loadingTask.promise.then(function(doc) {
                pdf = doc;
                pageNum = 1;
                preview.hidden = false;
                readerPage()
            }, function(reason) {
                alert(reason)
            });
        }

        // 预览上一页
        function prevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            fnCreatedFile(pageNum)
            readerPage()
        }

        //预览下一页
        function nextPage() {
            if (pageNum >= pdf.numPages) {
                return;
            }
            pageNum++;
            fnCreatedFile(pageNum)
            readerPage();
        }


        //渲染页面
        function readerPage() {
            pdf.getPage(pageNum).then(function(page) {
                let scale = 1.1;
                let viewport = page.getViewport({
                    scale: scale
                });
                preview.height = viewport.height;
                preview.width = viewport.width;
                let renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext).promise.then(addWatermark); //这里addWatermark带参数一定失败，所以addWatermark再套了个函数
            });
            page_num.innerText = ` ${pageNum} / ${pdf.numPages}`;
        }

        //加水印
        function addWatermark() {
            addwatermarkwithpara(nickname, area, mobile);
        }

        function addwatermarkwithpara(name, areaCode, Telnumber) {
            let context2 = preview.getContext('2d');
            let textAlign = 'center',
                textBaseline = 'middle',
                font = "14px Microsoft Yahei",
                fillStyle = 'rgba(184, 184, 184, 0.4)',
                content = name + ' ' + areaCode + Telnumber,
                cb = null,
                textX = 100,
                textY = 30;
            context2.textAlign = textAlign;
            context2.textBaseline = textBaseline;
            context2.font = font;
            context2.fillStyle = fillStyle;
            for (i = 0; i < 5; i++) {
                for (j = 0; j < 5; j++) {
                    context2.fillText(content, 75 + j * 300, 25 + 150 * i);
                    context2.fillText("墨芽豆学前素养课堂 www.moyadou.com", 175 + j * 400, 100 + 150 * i);
                }
            }
        }


        function GetpreviewBox() {
            let previewBox = document.querySelector('.previewBox');
            let preview = document.getElementById('preview')
        }

        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串 
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURI(decodeURI(strs[i].split("=")[1]));
                }
            }
            return theRequest;
        }

        function fnGetTextBook(param) {
            var Request = new Object();
            Request = GetRequest();
            let textbook = Request[param]
            return textbook;
        }
    </script>

</body>

</html>